<template>
    <div>
        <van-tabbar v-model="active" route>
            <van-tabbar-item icon="home-o" to="/index">首页</van-tabbar-item>
            <van-tabbar-item class="add" @click="show">
                <van-icon name="add" />
            </van-tabbar-item>
            <van-tabbar-item icon="setting-o" to="/mine">个人中心</van-tabbar-item>
        </van-tabbar>
        <van-popup
                v-model="flag"
                closeable
                close-icon="close"
                position="bottom"
                :style="{ height: '30%' }"
                round
                class="addPost"
        >
            <div class="personal">个人信息</div>
            <div class="share">
                <div class="teasing">
                    <img src="../assets/机器猫.jpg" alt=""  @click="published">
                    <p>去吐槽和分享吧！</p>
                </div>
                <div class="emo">
                    <img src="../assets/网易云.jpg" alt="" @click="listenMusic">
                    <p>emo</p>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import {Dialog} from 'vant'
    export default {
        name: "IndexFooter",
        data() {
            return {
                active: 0,
                flag:false
            };
        },
        methods: {
            show(){
                this.flag = true
            },
            listenMusic(){
                // const listenMusicToast = Toast.loading({
                //     duration:0,
                //     message: '删除中...',
                //     forbidClick: true,
                //     loadingType: 'spinner',
                // });
                this.$router.push('/music')
            },
              //发表
            published(){
                 // this.$router.push('/published')
                if(this.$store.state.isLogin==true){
                    Dialog.confirm({
                        message: '还未登录，去登录？',
                    })
                        .then(() => {
                            // on confirm
                            this.$router.push('/pwdlogin')
                        })
                        .catch(() => {
                            // on cancel
                        });
                }else {
                     this.$router.push('/published')
                }
            }
        }
    }
</script>

<style scoped>
    /deep/.add {
        color: skyblue;
        font-size: 60px;
        margin-top: -20px;
        z-index: 1000;
    }
    .addPost {
        padding: 10px;
        box-sizing: border-box;
    }
    /deep/.van-popup__close-icon--top-right {
        right: 35px;
    }
    .personal {
        height: 50px;
    }
    .share {
        display: flex;
        justify-content: space-around;
    }
    .share>div {
        width: 30%;
        height: 120px;
    }
    .emo {
        text-align: center;
    }
    .emo>img {
        width: 65%;
        /*height: 80%;*/
        border-radius: 30%;
    }
    .emo>p {
        margin: 5px 0 0 0;
        text-align: center;
    }
    .teasing>img {
        margin-top: -25px;
        width: 100%;
        /*z-index: 1000;*/
    }
    .teasing>p {
        margin-top: -25px;
        text-align: center;
        /*z-index: 1000;*/
    }
    /deep/.van-popup__close-icon--top-right {
        top:7px;
        right:15px
    }






</style>